// 整合函数-登录校验
checkLogin()

// 整合函数-渲染用户名
rendUsername()

// 整合函数-退出登录的逻辑
registerLogout()

// 抽取函数-获取学员数据
async function getData() {
    // 获取数据
    const res = await axios.get('/students')
    // console.log(res);

    // 渲染数据
    const html = res.data.map(v => {
        const { name, age, gender, group, hope_salary, salary, province, city, area, id } = v //解构
        return `
            <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>${gender === 0 ? '男' : '女'}</td>
                <td>第${group}组</td>
                <td>${hope_salary}</td>
                <td>${salary}</td>
                <td>${province + city + area}</td>
                <td data-id="${id}">
                    <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                    <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>`
    }).join('')
    document.querySelector('.list').innerHTML = html

    // 共有多少位学员
    document.querySelector('.total').innerText = res.data.length
}
getData()

// 显示弹窗
const modalData = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalData)
document.querySelector('#openModal').addEventListener('click', () => {
    // 修改标题
    document.querySelector('.modal-title').innerText = '添加学员'

    // 表单重置
    document.querySelector('#form').reset()

    // 清空籍贯(城市,地区)
    citySelect.innerHTML = `<option value="">--城市--</option>`
    areaSelect.innerHTML = `<option value="">--地区--</option>`

    // 删除自定义属性
    modalData.dataset.id = ''

    // 调用方法显示弹窗
    modal.show()
})

// 省市区的联动
const proSelect = document.querySelector('[name=province]')
const citySelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')
async function initSelect() {

    // 省数据的获取+渲染
    const proRes = await axios.get('/api/province')
    console.log(proRes);
    const proHtml = proRes.list.map(v => {
        return `<option value="${v}">--${v}--</option>`
    }).join('')
    proSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`


    // 市数据的获取+渲染
    proSelect.addEventListener('change', async () => {
        const citRes = await axios.get('/api/city', {
            params: {
                pname: proSelect.value
            }
        })
        const citHtml = citRes.list.map(v => {
            return `<option value="${v}">--${v}--</option>`
        }).join('')
        citySelect.innerHTML = `<option value="">--城市--</option>${citHtml}`

        // 一会儿需要清空地区标签的内容，否则会有bug（停留在上一次的状态）
        areaSelect.innerHTML = '<option value="">--地区--</option>'
    })


    // 区数据的获取+渲染
    citySelect.addEventListener('change', async () => {
        const areaRes = await axios.get('/api/area', {
            params: {
                pname: proSelect.value,
                cname: citySelect.value
            }
        })
        const areaHtml = areaRes.list.map(v => {
            return `<option value="${v}">--${v}--</option>`
        }).join('')
        areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    })

}
initSelect()


// 数据新增
document.querySelector('#submit').addEventListener('click', () => {
    if (modalData.dataset.id) {
        // 后续调用保留修改的函数
        saveEdit()
    } else {
        // 调用新增学员的函数
        addStudent()
    }


})

// 函数抽取-新增学员
async function addStudent() {
    // 数据收集+转换+提交
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })
    // console.log(data);

    // 转换
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    console.log(data);

    // 提交
    try {
        // 添加成功
        const res = await axios.post('/students', data)
        showToast(res.message)
        getData()
    } catch (error) {
        // 添加失败
        showToast(error.response.data.message)
    }
    modal.hide()//延迟关闭弹窗
}


// 删除数据-绑定事件
document.querySelector('.list').addEventListener('click', (e) => {


    const ids = e.target.parentNode.parentNode.dataset.id
    // 如果点击的是 删除
    if (e.target.classList.contains('bi-trash')) {
        delStudent(ids)
    }

    // 如果点击的是 编辑
    if (e.target.classList.contains('bi-pen')) {
        editStudent(ids)
    }
})

// 抽取函数-删除数据
async function delStudent(idx) {
    await axios.delete(`/students/${idx}`)
    getData()
}

// 抽取函数-编辑学员数据
async function editStudent(idx) {
    // console.log('编辑', idx);

    const res = await axios.get(`/students/${idx}`)

    // 修改标题
    document.querySelector('.modal-title').innerText = '修改学员'

    // 设置输入框（姓名，年龄，组号，期望薪资，就业薪资）
    // 属性名组
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
        document.querySelector(`[name=${key}]`).value = res.data[key]
    })

    // 设置性别(男0，女1)
    const { gender } = res.data
    // 伪数组【男checkbox，女checkbox】
    const chks = document.querySelectorAll('[name=gender]')
    chks[gender].checked = true

    // 设置籍贯
    const { province, city, area } = res.data

    // 设置省(设置select标签的value属性,对应的option会被选中)
    proSelect.value = province

    // 设置市
    const citRes = await axios.get('/api/city', {
        params: {
            pname: province
        }
    })
    const citHtml = citRes.list.map(v => {
        return `<option value="${v}">--${v}--</option>`
    }).join('')
    citySelect.innerHTML = `<option value="">--城市--</option>${citHtml}`
    citySelect.value = city

    // 设置区
    const areaRes = await axios.get('/api/area', {
        params: {
            pname: province,
            cname: city
        }
    })
    const areaHtml = areaRes.list.map(v => {
        return `<option value="${v}">--${v}--</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    areaSelect.value = area

    // 弹窗
    modal.show()



    // 保存学员ie,用来区分 新增(dataset.id不存在) / 编辑(dataset.id有值)
    modalData.dataset.id = id


}


// 抽取函数-保存修改
async function saveEdit() {
    // 数据的收集+转换+提交
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group

    try {
        // 修改成功
        const saveRes = await axios.put(`/students/${modalData.dataset.id}`, data)
        showToast(saveRes, message)
        getData()
    } catch (error) {
        // 修改失败
        showToast(error.response.data.message)
    }
    modal.hide()
}

